<template>
	<el-form style="position: relative" label-position="top" :model="model" class="ditail-wrapper" :key="reloadKey">
		<el-row>
			<el-col
				:span="item.children ? 24 : item.span"
				v-for="item in formateColumn(column)"
				:key="item.prop"
				class="mt10"
				:style="{ display: item.display == false || item.viewDisplay == false || (item.display == false && item.viewDisplay !== true) ? 'none' : '' }"
			>
				<ContentListItem :item="item" :labelPosition="item.labelPosition || 'top'" :model="model" style="width: 100%">
					<template v-slot:[item.prop] v-if="!!slots[item.prop]">
						<slot :name="item.prop" :row="item" :model="model"></slot>
					</template>
				</ContentListItem>
			</el-col>
		</el-row>

		<view v-if="isBlockchain" class="block_chain_status">
			<img style="width: 100px" v-if="pageRowData[blockchainProp] !== -1" :src="judgeImg(pageRowData[blockchainProp])" alt="上链状态" />
		</view>
	</el-form>
</template>

<script setup lang="ts">
import ContentListItem from './ContentListItem/index.vue'

type Props = {
	model?: Object
	labelPosition?: string
	flagStr?: string
	api?: string
	column?: any
	borderBottom?: boolean
	isBlockchain?: boolean
	blockchainProp?: string
	onLoadFormate?: Function
	pageRowData?: Object
}

const props = withDefaults(defineProps<Props>(), {
	borderBottom: false,
	isBlockchain: false,
	blockchainProp: 'onBlockchainFlag',
})

const reloadKey = ref(0)
watch(
	() => props.model,
	(val) => {
		reloadKey.value = Math.random()
	},
	{
		immediate: true,
	}
)
const slots = useSlots()

const formateColumn = (arr) => {
	if(arr&&Array.isArray(arr)){
		const controlArr = arr
			.map((item) => {
				if (item.control) {
					const control = item.control(props.model[item.prop], props.model)
					return control
				}
			})
			.filter(Boolean)
		arr.some((item) => {
			controlArr.forEach((control) => {
				const temp = control[item.prop]
				if (temp) item.display = temp.display
			})
		})
		return arr
	}
		
}

// 判断是否是区块链
const judgeImg = (val) => {
	if (val && (val == 1 || val == '1')) {
		return 'https://aplid-51.oss-cn-hangzhou.aliyuncs.com/1697611767921_64a87ee9.png'
	} else if ((val && (val == 2 || val == '2')) || val == 5 || val == '5' || val == 6 || val == '6') {
		return 'https://aplid-51.oss-cn-hangzhou.aliyuncs.com/1697611776452_5d723cb9.png'
	} else if (val && (val == 3 || val == '3')) {
		return 'https://aplid-51.oss-cn-hangzhou.aliyuncs.com/1697611787241_14043b2f.png'
	} else if (val && (val == 0 || val == '0')) {
		return 'https://aplid-51.oss-cn-hangzhou.aliyuncs.com/1697611742122_048804c9.png'
	}
}
</script>

<style scoped lang="scss">
:deep(.el-form-item__label) {
	color: #999;
	font-size: 16px;
}
.ditail-wrapper {
	padding: 20px;
	margin-bottom: 10px;
}
.block_chain_status {
	position: absolute;
	right: 0;
	top: 0;
}
</style>
